<!DOCTYPE html>
<html>
<head>
<title>Diagram of a Sphere Divided into a Cap and Segment</title>
</head>
<body>
<canvas id="physics_diagram" width="450" height="400"></canvas>
<script>
    const canvas = document.getElementById('physics_diagram');
    const ctx = canvas.getContext('2d');

    // Define geometric parameters
    const centerX = 225;
    const centerY = 200;
    const R_val = 150;
    const angle = 145 * Math.PI / 180; // Angle in radians for the dividing point on the circle

    // Calculate the coordinates of the point on the circle
    const pointX = centerX + R_val * Math.cos(angle);
    const pointY = centerY - R_val * Math.sin(angle); // Canvas Y-coordinate is inverted

    // --- Drawing functions ---

    function drawCircle() {
        ctx.beginPath();
        ctx.arc(centerX, centerY, R_val, 0, 2 * Math.PI);
        ctx.lineWidth = 2.5;
        ctx.strokeStyle = 'black';
        ctx.stroke();
    }

    function drawLabels() {
        ctx.fillStyle = 'black';
        ctx.font = 'italic 28px "Times New Roman"';
        
        // Label 'O' for the center
        ctx.fillText('O', centerX + 8, centerY + 20);
        
        // Label 'R' for the radius
        const R_label_x = (centerX + pointX) / 2 - 40;
        const R_label_y = (centerY + pointY) / 2 + 5;
        ctx.fillText('R', R_label_x, R_label_y);

        // Label 'h' for the height of the cap
        const h_label_x = centerX + 15;
        const h_label_y = pointY - (pointY - (centerY - R_val)) / 2 + 10;
        ctx.font = 'italic 26px "Times New Roman"';
        ctx.fillText('h', h_label_x, h_label_y);
    }

    function drawLines() {
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2.5;

        // Draw the radius line
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.lineTo(pointX, pointY);
        ctx.stroke();

        // Draw the dashed lines
        ctx.save();
        ctx.setLineDash([6, 4]);
        ctx.lineWidth = 1.8;

        // Horizontal dashed line from the point on the circle to the vertical axis
        ctx.beginPath();
        ctx.moveTo(pointX, pointY);
        ctx.lineTo(centerX, pointY);
        ctx.stroke();

        // Vertical dashed line representing the height 'h'
        const topY = centerY - R_val;
        ctx.beginPath();
        ctx.moveTo(centerX, topY);
        ctx.lineTo(centerX, pointY);
        ctx.stroke();

        ctx.restore();
    }

    function drawForceArrow() {
        // The arrow points to the dividing point on the circle's circumference
        const tipX = pointX;
        const tipY = pointY;
        const arrowAngle = 155 * Math.PI / 180; // Angle of the arrow's direction
        const arrowLength = 25;
        const arrowHalfWidth = 8;
        
        ctx.save();
        ctx.fillStyle = '#4A4A4A'; // Dark gray color for the arrowhead
        
        // Translate and rotate the context to draw the arrow easily
        ctx.translate(tipX, tipY);
        ctx.rotate(arrowAngle);
        
        // Draw the triangular arrowhead
        ctx.beginPath();
        ctx.moveTo(0, 0); // Tip of the arrow
        ctx.lineTo(-arrowLength, arrowHalfWidth); // Back-right point
        ctx.lineTo(-arrowLength, -arrowHalfWidth); // Back-left point
        ctx.closePath();
        ctx.fill();
        
        ctx.restore();
    }

    // --- Execute drawing ---
    drawCircle();
    drawLines();
    drawLabels();
    drawForceArrow();

</script>
</body>
</html>